<template>
  <div class="document">
    <div class="banner">
      <div>
        <span
          ><div id="u423"></div>
          居民档案详情</span
        >
      </div>
      <!-- 分割线 -->
      <el-divider />
      <!-- 选项卡 -->
      <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="健康档案" name="first">
          <el-card class="box-card box-xbox1">
            <p>居民信息</p>



<el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="居民编号">
      <div style="color:green" >32132132165</div>
    </el-form-item>
    <el-form-item label="姓名">
      <div style="color:green">顶针</div>
    </el-form-item>
    <el-form-item label="身份证号">
      <div style="color:green">313213554654321</div>
    </el-form-item>
    <el-form-item label="手机号码">
      <div style="color:green">3213213554534</div>
    </el-form-item>
  </el-form>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="现居地">
      <div style="color:green">北京</div>
    </el-form-item>
    <el-form-item label="登录密码">
      <div style="color:green">op123.</div>
    </el-form-item>
    <el-form-item label="行政区划">
      <div style="color:green">北京</div>
    </el-form-item>
    <el-form-item label="性别">
      <div style="color:green">男</div>
    </el-form-item>
  </el-form>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="出生日期">
      <div style="color:green">1999年9月9日</div>
    </el-form-item>
    <el-form-item label="籍贯">
      <div style="color:green">北京市</div>
    </el-form-item>
    <el-form-item label="民族">
      <div style="color:green">藏族</div>
    </el-form-item>
    <el-form-item label="文化程度">
      <div style="color:green">大专及以上</div>
    </el-form-item>
  </el-form>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="婚姻状况">
      <div style="color:green">未婚</div>
    </el-form-item>
    <el-form-item label="职业">
      <div style="color:green">网红</div>
    </el-form-item>
    <el-form-item label="工作单位">
      <div style="color:green">字节跳动</div>
    </el-form-item>
    <el-form-item label="紧急联系人">
      <div style="color:green">芝士雪豹</div>
    </el-form-item>
  </el-form>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="联系人电话">
      <div style="color:green">123546546</div>
    </el-form-item>
    <el-form-item label="户籍类型">
      <div style="color:green">其他</div>
    </el-form-item>
    <el-form-item label="费用类型">
      <div style="color:green">自费</div>
    </el-form-item>
    <el-form-item label="定点医疗单位">
      <div style="color:green">北京仁和医院</div>
    </el-form-item>
  </el-form>
          <!-- 分割线 -->
          <el-divider />
<h3>健康信息</h3>

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="身高">
    <div style="color:green">185cm</div>
  </el-form-item>
  <el-form-item label="体重">
    <div style="color:green">75kg</div>
  </el-form-item>
  <el-form-item label="血型">
    <div style="color:green">AB型</div>
  </el-form-item>
</el-form>

          <!-- 分割线 -->
          <el-divider />
<!-- 按钮 -->
          <el-row class="mb-4">
            <el-button @click="go" type="primary">编辑档案信息</el-button>

            <el-button @click="back">返回</el-button>
        
          </el-row>



          </el-card>






        </el-tab-pane>
        <el-tab-pane label="健康记录" name="second">
          <!-- 卡片1（体重）-->
          <el-card class="box-card">
            <div class="box-ad">
              <span>体重趋势</span>
              <p style="font-size: 10px; line-height: 10px">单位：kg</p>
              <div class="box-nick"></div>
            </div>
            <div class="box-add">
              <span>体重记录</span>
              <div class="box-nick1">
                <el-table :data="tableData" stripe style="width: 100%">
                  <el-table-column prop="date" label="测量时间" width="140" />
                  <el-table-column prop="num" label="数值（kg）" width="100" />
                  <el-table-column prop="asses" label="评估" width="90" />
                  <el-table-column prop="source" label="数据来源" width="90" />
                  <!-- <el-table-column prop="operate" label="操作" width="100">
                    <template #default>
                      <el-button size="small">删除</el-button>
                    </template>
                  </el-table-column> -->
                </el-table>
              </div>
            </div>
          </el-card>
          <!-- 卡片2（心率） -->
          <el-card class="box-card">
            <div class="box-ad">
              <span>心率趋势</span>
              <p style="font-size: 10px; line-height: 10px">单位：kg</p>
              <div class="box-nice"></div>
            </div>
            <div class="box-add">
              <span>心率记录</span>
              <div class="box-nike1">
                <el-table :data="tableData1" stripe style="width: 100%">
                  <el-table-column prop="date" label="测量时间" width="140" />
                  <el-table-column prop="num" label="数值（dmp）" width="120" />
                  <el-table-column prop="asses" label="评估" width="90" />
                  <el-table-column prop="source" label="数据来源" width="90" />
                  <!-- <el-table-column prop="operate" label="操作" width="100">
                    <template #default>
                      <el-button size="small">删除</el-button>
                    </template>
                  </el-table-column> -->
                </el-table>
              </div>
            </div>
          </el-card>
          <!-- 卡片3（血压） -->
          <el-card class="box-card">
            <div class="box-ad">
              <span>血压趋势</span>
              <p style="font-size: 10px; line-height: 10px">单位：mmHg</p>
              <div class="box-non"></div>
            </div>
            <div class="box-add">
              <span>血压记录</span>
              <div class="box-nike1">
                <el-table :data="tableData2" stripe style="width: 100%">
                  <el-table-column prop="date" label="测量时间" width="140" />
                  <el-table-column prop="num" label="数值（dmp）" width="120" />
                  <el-table-column prop="asses" label="评估" width="90" />
                  <el-table-column prop="source" label="数据来源" width="90" />
                  <!-- <el-table-column prop="operate" label="操作" width="100">
                    <template #default>
                      <el-button size="small">删除</el-button>
                    </template>
                  </el-table-column> -->
                </el-table>

              </div>
            </div>
          </el-card>
          <!-- 分割线 -->
          <el-divider />
          <!-- 按钮返回 -->
          <el-row class="mb-4 btn">
            <el-button @click="back">返回</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="签约信息" name="sis">
          <el-card class="box-card">
            <el-empty description="网站开发中尽请期待" />
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="服务记录" name="secon">
          <el-card class="box-card">
          <el-empty description="网站开发中尽请期待" />
          </el-card>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import { reactive } from 'vue'
//返回主页功能
const router = useRouter();
const back = () => {
  router.push("/ha");
};
const go = () => {
  router.push("/pei");
};
// 选项卡
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

// 可视化数据图表（体重）
onMounted(() => {
  var myChart = echarts.init(document.getElementsByClassName("box-nick")[0]);
  myChart.setOption({
    xAxis: {
      type: "category",
      data: ["1/4", "1/2", "1/31", "2/4", "2/14", "2/18", "3/1"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [49.0, 49.5, 50, 52, 56, 54, 52],
        type: "line",
        smooth: true,
      },
    ],
  });
});

// 可视化数据图表（心率）
onMounted(() => {
  var myChart1 = echarts.init(document.getElementsByClassName("box-nice")[0]);
  myChart1.setOption({
    xAxis: {
      type: "category",
      data: ["1/4", "1/2", "1/31", "2/4", "2/14", "2/18", "3/1"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [80, 120, 95, 100.3, 89, 79, 85],
        type: "line",
        smooth: true,
      },
    ],
  });
});

// 可视化数据图表（血压）
const colors = ["#5470C6", "#EE6666"];
onMounted(() => {
  var myChart2 = echarts.init(document.getElementsByClassName("box-non")[0]);
  myChart2.setOption({
    color: colors,

    tooltip: {
      trigger: "none",
      axisPointer: {
        type: "cross",
      },
    },
    legend: {},
    grid: {
      top: 70,
      bottom: 50,
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[1],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params: any) {
              return (
                "Precipitation  " +
                params.value +
                (params.seriesData.length ? "：" + params.seriesData[0].data : "")
              );
            },
          },
        },

        // prettier-ignore
        data: ['1/4', '1/24', '1/31', '2/4', '2/14', '2/18', '3/1'],
      },
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[0],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params: any) {
              return (
                "Precipitation  " +
                params.value +
                (params.seriesData.length ? "：" + params.seriesData[0].data : "")
              );
            },
          },
        },

        // prettier-ignore
        data: [],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "收缩压",
        type: "line",
        xAxisIndex: 1,
        smooth: true,
        emphasis: {
          focus: "series",
        },
        data: [92, 100, 110, 118, 139, 125, 109],
      },
      {
        name: "舒张压",
        type: "line",
        smooth: true,
        emphasis: {
          focus: "series",
        },
        data: [89, 95, 90, 80, 70, 80, 98],
      },
    ],
  });
});

// 表格（体重）
const tableData = [
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
];

// 表格（心率）
const tableData1 = [
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
];
// 表格（血压）
const tableData2 = [
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "70",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
  {
    date: "2022/10/10 2:29",
    num: "49.2",
    asses: "正常",
    source: "用户记录",
    operate: "编辑 删除",
  },
];



//居民详情表单
const formInline = reactive({
  user: '',
  region: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped>
.document {
  width: 100%;
  height: 100%;
}
.banner {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

#u423 {
  border-width: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  float: left;
  margin-left: 18px;
  margin-right: 18px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 99%;
  margin-bottom: 20px;
  height: 450px;
  width: 99%;
}
.box-nick {
  width: 500px;
  height: 400px;
}
.box-nice {
  width: 500px;
  height: 400px;
}

.box-non {
  width: 500px;
  height: 400px;
}
.box-nick1 {
  width: 550px;
  height: 400px;
}
.box-ad {
  width: 500px;
  height: 100%;
  float: left;
}
.box-add {
  width: 600px;
  height: 100%;
  float: left;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
.box-xbox1{
  width: 100%;
  height: 100%;
}

.box-xbox1 demo-form-inline{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

</style>
